<template>
	<view class="ranking-page safe-area">
		<view class="header">
			<!-- 顶部标签切换 -->
			<view class="tab-bar">
				<view v-for="(item, index) in tabs" :key="index"
					:class="['tab-item', currentTab === index ? 'active' : '']" @click="switchTab(index)">
					{{ item }}
				</view>
			</view>
			<!-- Top 3 -->
			<view class="top-three">
				<view class="top-three-box" v-for="(item, index) in plateList" :key="index">
					<image :src="item.url" :class="`plate-img ${item.key}-item`" />

					<!-- 对应的前三名信息 -->
					<view :class="`top-three-info ${item.key}-info`" v-if="topThreeList[index]">
						<view :class="`info-avatar ${item.key}-avatar`" :style="{  border: `3px solid ${item.color}` }">
							<avatarGroup :avatars="topThreeList[index].avatar"></avatarGroup>
						</view>
						<view class="medal-img">
							<image :src="item.medal" />
						</view>
						<view class="name" :style="{ color: item.color }">{{ topThreeList[index].name }}</view>
						<view class="join-btn" :style="{ color: item.color, border: `1px solid ${item.color}` }">申请加入
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 滚动区域 -->
		<scroll-view class="scroll-list" scroll-y @scrolltolower="loadMore" :lower-threshold="80">
			<view v-for="(item, index) in visibleList" :key="item.id" class="list-item">

				<view class="left-session">
					<view class="rank-num">{{(index+4<=9)?`0${index + 4}`:index+4}}</view>
					<view class="rank-img">
						<avatarGroup :avatars="item.avatar"></avatarGroup>
					</view>
				</view>
				<view class="right-info">

					<view class="flex-top">
						<view class="name">{{ item.name }}</view>
						<view class="join-btn">申请加入 </view>
					</view>
					<view class="desc">{{ item.desc }}</view>
				</view>
			</view>

			<view v-if="noMore" class="no-more">没有更多了</view>
		</scroll-view>

	</view>
</template>

<script setup>
	import avtarImg from '@/static/logo.png'
	import avatarGroup from './avatarGroup.vue'
	import {
		ref,
		computed,
		onMounted,
		onUnmounted
	} from 'vue'

	const tabs = ['周榜', '月榜', '总榜']
	const currentTab = ref(2)

	const switchTab = (index) => {
		currentTab.value = index
	}
	//奖台图片
	const plateList = [{
			id: 0,
			key: 'silver',
			url: '/static/rank/silverPlate.png',
			medal: '/static/rank/silver.png',
			color: '#666F83'
		}, {
			id: 1,
			key: 'gold',
			url: '/static/rank/goldPlate.png',
			medal: '/static/rank/gold.png',
			color: '#AC5829'
		},
		{
			id: 2,
			key: 'bronze',
			url: '/static/rank/bronzePlate.png',
			medal: '/static/rank/bronze.png',
			color: '#BF6A44'
		},
	]
	const avatar = avtarImg
	const timer = ref(null)
	// Top 3 数据
	const topThreeList = ref([])
	//剩余滚动数据
	const visibleList = ref([])
	//分页
	const page = ref(1)
	const pageSize = 5
	const loading = ref(false)
	const noMore = ref(false)
	// 模拟总数据
	const mockData = [{
		id: 1,
		name: '商路同行汇',
		desc: '专注品牌建设与市场扩张的实战社群。涵盖品',
		avatar: ['/static/user/user1.png', '/static/user/user2.png', '/static/user/user3.png',
			'/static/user/user4.png'
		]
	}, {
		id: 2,
		name: '创富思维圈',
		desc: '专注品牌建设与市场扩张的实战社群。涵盖品',
		avatar: ['/static/user/user1.png', '/static/user/user2.png', '/static/user/user3.png',
			'/static/user/user4.png'
		]
	}, {
		id: 3,
		name: '政企对接站',
		desc: '专注品牌建设与市场扩张的实战社群。涵盖品',
		avatar: ['/static/user/user1.png', '/static/user/user2.png', '/static/user/user3.png',

		]
	}, {
		id: 4,
		name: '品牌增长营',
		desc: '专注品牌建设与市场扩张的实战社群。涵盖品牌定位、视觉设计、内容营销、私域运营等干货分享…通过案例研讨、诊断咨询、资源对接，帮中小企…突破品牌认知度低、流量转化难的困境，实现业绩增长。',
		avatar: ['/static/user/user1.png', '/static/user/user3.png',
			'/static/user/user4.png'
		]
	}, {
		id: 5,
		name: '跨境商机通',
		desc: '服务外贸企业与跨境创业者的资源社群。分享全球市场动态、跨境平台规则、物流清关技巧，对接…外供应商与采购渠道。定期举办跨境选品会、政…解读会，帮你解决语言壁垒、支付风险、文化差异等问题，拓展全球市场。',
		avatar: ['/static/user/user1.png', '/static/user/user2.png', '/static/user/user3.png',
			'/static/user/user4.png'
		]
	}, {
		id: 6,
		name: '创投对接汇',
		desc: '链接创业者与投资人的精准匹配平台。为优质项目提供路演展示机会，为投资人筛选高潜力赛道项…目。分享融资技巧、商业计划书撰写指南，定期…织线上投融资对接会，助力初创企业解决资金难题，加速项目落地成长。',
		avatar: ['/static/user/user3.png',
			'/static/user/user4.png'
		]
	}, {
		id: 7,
		name: '实体转型社',
		desc: '助力传统实体企业数字化转型的交流社群。聚焦线下门店线上化、私域流量运营、新零售模式搭建…主题，分享转型成功案例与避坑指南。提供技术…具推荐、运营人才对接服务，帮实体企业打破增长瓶颈，适应新商业环境。',
		avatar: ['/static/user/user1.png', '/static/user/user2.png', '/static/user/user3.png',
			'/static/user/user4.png'
		]
	}, {
		id: 8,
		name: '商学实战堂',
		desc: '注重商业知识落地应用的学习型社群。邀请实战派导师分享市场营销、团队管理、财务管理等实用…程，通过案例拆解、问题会诊、作业打卡等形式…化学习效果。定期组织线下企业参访，让理论知识与实战经验深度结合，提升商业能力。',
		avatar: ['/static/user/user1.png', '/static/user/user2.png', '/static/user/user3.png',
			'/static/user/user4.png'
		]
	}, {
		id: 9,
		name: '供应链共生圈',
		desc: '覆盖产业链上下游的资源整合社群。连接原料供应商、生产商、分销商、服务商，提供供需信息发…布、资质审核、合作对接服务。分享供应链优化…案、成本控制技巧、风险预警机制，通过资源共享、信息互通，提升整个产业链的效率与抗风险能力。',
		avatar: ['/static/user/user1.png', '/static/user/user2.png', '/static/user/user3.png',
			'/static/user/user4.png'
		]
	}, {
		id: 10,
		name: '县城商机汇',
		desc: '聚焦县域经济与乡村振兴的商业社群。挖掘县域特色农产品、文旅资源、手工艺品的商业价值，分…农村电商运营、县域品牌打造经验。对接城市渠…资源与县域生产基地，助力县域企业拓展市场，推动城乡商业资源双向流动。',
		avatar: ['/static/user/user1.png', '/static/user/user2.png', '/static/user/user3.png',
			'/static/user/user4.png'
		]
	}, {
		id: 11,
		name: '县城商机汇',
		desc: '聚焦县域经济与乡村振兴的商业社群。挖掘县域特色农产品、文旅资源、手工艺品的商业价值，分…农村电商运营、县域品牌打造经验。对接城市渠…资源与县域生产基地，助力县域企业拓展市场，推动城乡商业资源双向流动。',
		avatar: ['/static/user/user1.png', '/static/user/user2.png', '/static/user/user3.png',
			'/static/user/user4.png'
		]
	}, {
		id: 12,
		name: '县城商机汇',
		desc: '聚焦县域经济与乡村振兴的商业社群。挖掘县域特色农产品、文旅资源、手工艺品的商业价值，分…农村电商运营、县域品牌打造经验。对接城市渠…资源与县域生产基地，助力县域企业拓展市场，推动城乡商业资源双向流动。',
		avatar: ['/static/user/user1.png', '/static/user/user2.png', '/static/user/user3.png',
			'/static/user/user4.png'
		]
	}, {
		id: 13,
		name: '县城商机汇',
		desc: '聚焦县域经济与乡村振兴的商业社群。挖掘县域特色农产品、文旅资源、手工艺品的商业价值，分…农村电商运营、县域品牌打造经验。对接城市渠…资源与县域生产基地，助力县域企业拓展市场，推动城乡商业资源双向流动。',
		avatar: ['/static/user/user1.png', '/static/user/user2.png', '/static/user/user3.png',
			'/static/user/user4.png'
		]
	}]



	const loadMore = () => {
		if (loading.value || noMore.value) return
		loading.value = true

		timer.value = setTimeout(() => {
			// 如果 topThree 还没赋值，先取前三
			if (topThreeList.value.length === 0) {
				topThreeList.value = mockData.slice(0, 3)
			}

			// 剩下的从第4条开始分页
			const remaining = mockData.slice(3)
			const start = (page.value - 1) * pageSize
			const end = start + pageSize
			const newItems = remaining.slice(start, end)

			if (newItems.length) {
				visibleList.value.push(...newItems)
				page.value++
			} else {
				noMore.value = true
			}

			loading.value = false
		}, 600)
	}

	onMounted(() => {
		loadMore()
	})
	onUnmounted(() => {
		console.log('去掉');
		timer.value = null
		clearTimeout(timer.value)
	})
</script>

<style lang="scss" scoped>
	/* 页面安全区域 */
	.safe-area {
		margin-top: var(--status-bar-height);
	}

	.ranking-page {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.header {
		width: 100%;
		height: 339px;
		background: linear-gradient(180deg, #2F86F6 55%, #a8cbf8 100%);
		position: fixed;
		z-index: 10;
	}

	.tab-bar {
		display: flex;
		justify-content: center;
		padding: 20rpx 0;

		.tab-item {
			position: relative;
			padding: 0 16px;
			font-size: 28rpx;
			color: #ffffff90;
			height: 40px;
			line-height: 40px;
			text-align: center;

			&.active {
				color: #fff;
				font-weight: 600;

				&::after {
					content: '';
					position: absolute;
					bottom: 6rpx;
					left: 50%;
					transform: translateX(-50%);
					width: 15px;
					height: 4rpx;
					background: #fff;
					border-radius: 2px;
				}
			}
		}
	}

	/* Top3  */
	.top-three {
		display: flex;
		justify-content: center;
		align-items: flex-end;
		position: absolute;
		bottom: 0;
		width: 100%;

		.top-three-box {
			position: relative;

			.gold-item {
				width: 119px;
				height: 194px;
			}

			.silver-item {
				width: 115px;
				height: 120px;
			}

			.bronze-item {
				width: 115px;
				height: 120px;
			}

			.gold-info {
				top: 17px;
			}

			.silver-info,
			.bronze-info {
				top: 6px;
			}

		}

		.top-three-info {
			position: absolute;
			height: 100%;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 100%;
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;

			.info-avatar {
				position: absolute;
				z-index: 3;
				width: 60px;
				height: 60px;
				border-radius: 50%;

				image {
					width: 60px;
					height: 60px;
					border-radius: 50%;
				}
			}

			.gold-avatar,
			.silver-avatar,
			.bronze-avatar {
				top: -60px;
			}

			.name {
				font-size: 18px;
				font-weight: 700;
			}

			.medal-img {
				z-index: 2;

				// margin-bottom: 10px;
				image {
					width: 51px;
					height: 51px;

				}
			}

			.join-btn {
				// font-size: 10px;
				// width: 63px;
				// height: 20px;
				background: #FFFFFF;
				// border-radius: 10px;
				// margin-top: 7px;
				// display: flex;
				// align-items: center;
				// justify-content: center;
			}
		}

	}

	.join-btn {
		font-size: 10px;
		width: 63px;
		height: 20px;

		border-radius: 10px;
		margin-top: 7px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 滚动区域 */
	.scroll-list {
		flex: 1;
		margin-top: 339px;
		// padding: 20rpx;
		overflow-y: auto;
		overflow: auto;
		z-index: 9;
	}

	//，每个滚动对象
	.list-item {
		padding: 20px 12px;
		width: calc(100% - 24px);
		background: #fff;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);

		.left-session {
			display: flex;
			align-items: center;

			.rank-num {
				text-align: center;
				font-size: 16px;
				color: #41485D;
				font-weight: 700;
				margin: 0 6px 0 0;
			}

			.rank-img {
				margin-right: 13px;

				image {
					width: 60px;
					height: 60px;
					border-radius: 50%;
				}
			}
		}


		.right-info {
			flex: 1;

			.flex-top {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.name {
					font-size: 32rpx;
					font-weight: 700;
					color: #41485D;
				}

				.join-btn {
					background: #FFF3ED;
					color: #FF7D41;
					margin-top: 0;
				}
			}


			.desc {
				color: #858B9C;
				font-size: 24rpx;
				margin-top: 8rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				/* 显示最多2行 */
				overflow: hidden;
				text-overflow: ellipsis;
				word-break: break-word;
				/* 防止长单词撑开 */
			}
		}
	}

	.loading,
	.no-more {
		text-align: center;
		color: #888;
		font-size: 26rpx;
		margin: 30rpx 0;
	}
</style>